<template>
    <div class="sharePage" >
        <div class="code-area" :style="{background:bgColor.codeColor}">
            <div class="shareCode">
                <img src="../img/code.png" alt="">
            </div>
            <p>长按识别二维码</p>
        </div>

        <div class="swiper-container" id="swiper-Ad" :shareData="shareData" :style="{background:bgColor.swiperColor}">
            <div class="swiper-pagination"></div>
            <div class="swiper-wrapper">
                <div class="swiper-slide" v-for="(item,index) in shareData" :key="index" >
                     <div class="share-ad flex" >
                         <!--分享广告-->
                        <div class="logo align-center">
                            <img :src="item.photo" alt="">
                        </div>
                         <div class="flex-1 align-center">
                             <!--<p class="flex-text">{{item.text}}</p>-->
                             <p v-if="item.remarks" class="flex-study">
                                 {{item.remarks}}
                             </p>
                         </div>
                         <div class="openApp align-center">
                             <a :href=item.link  >
                                  打开APP
                             </a>
                         </div>
                     </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
    export default({
        props:{
            shareData:{
                type:Array,
            },
            bgColor:{
                type:Object
            }

        },
        data(){
          return{
              isIos:false,
              isAndroid:false
          }
        },
        methods:{
            initData(){
                var  swiper1 = new this.Swiper("#swiper-Ad", {
                    autoplay: true,
                    pagination: {
                        el: '.swiper-pagination',
                    },
                });
            }
        },
        mounted(){
            var u = navigator.userAgent, app = navigator.appVersion;
            var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1; //g
            var isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
            if (isAndroid) {
                //这个是安卓操作系统
                this.isAndroid =true;
                this.isIos =false;
            }
            if (isIOS) {
                this.isAndroid =false;
                this.isIos =true;
                //这个是ios操作系统
            }
            this.initData();
        }
    })
</script>
<style lang="scss" scoped="">
    .sharePage /deep/{
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        z-index: 999;
        .code-area{
            height:225px;
            background:rgba(245,245,245,1);
            overflow: hidden;
            p{
                font-size:14px;
                font-family:PingFang-SC-Medium;
                font-weight:500;
                color:rgba(51,51,51,1);
                text-align: center;
                margin-top: 20px;
            }
        }
        .shareCode {
            width:120px;
            height:120px;
            background:rgba(255,255,255,1);
            margin: 0 auto;
            margin-top: 37px;
            overflow: hidden;
            img{
                display: block;
                width:101px;
                height:101px;
                margin: 0 auto;
                margin-top: 9px;
            }

        }
        #swiper-Ad{
            width: 100%;
            height: 51px;
            .swiper-pagination{
                bottom: 6px;
                height: 6px;
            }
            .swiper-pagination-bullet.swiper-pagination-bullet-active{
                background:rgba(235,77,68,1);
                opacity: 1;
            }
            .swiper-pagination-bullet{
                opacity: 1;
                width:4px;
                height:4px;
                background:rgba(188,188,188,1);
                border-radius:50%;
                vertical-align: top;
                &:nth-child(1){
                    margin-left: 180px;
                }
            }
            .swiper-wrapper{
                .swiper-slide{
                    .logo{
                        width:61px;
                        height:34px;
                        margin-right: 13px;
                        margin-top: 8px;
                        margin-left: 16px;
                        vertical-align: top;
                        img{
                            width:61px;
                            height:34px;
                        }
                    }
                    .flex-1{
                        margin-top: 8px;
                        .flex-text{
                            font-size:12px;
                            color:rgba(51,51,51,1);

                        }
                        .flex-study{
                            color:rgba(153,153,153,1);
                            font-size:14px;
                            margin-top: 12px;
                            font-weight: bold;
                        }
                    }
                    .openApp{
                        margin-top: 10px;
                        width:60px;
                        height:30px;
                        line-height: 30px;
                        margin-right: 16px;
                        text-align: center;
                        background:rgba(235,77,68,1);
                        border-radius:8px;
                        a{
                            vertical-align: top;
                            display: inline-block;
                            line-height: 30px;
                            font-size:12px;
                            color: white;
                        }
                    }
                }
            }
        }
        .ellipicls{
            overflow: hidden;
            text-overflow:ellipsis;
            white-space: nowrap;
        }
        .ellipicls-3{
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 3;
            overflow: hidden;
        }
        .flex{
            display: -webkit-box;
            display: -webkit-flex;
            display: flex;
        }
        .align-center{
            -webkit-box-align: center;
            -webkit-align-items: center;
            align-items: center;
        }
        .flex-1{
            -webkit-box-flex: 1;
            -webkit-flex: 1;
            flex: 1;
            min-width: 0;
            height: 100%;
        }
    }

</style>
